<!DOCTYPE html>
<html>
<head>
    <!--    <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0"> -->
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="/public/css/element-ui/index.css">
    <link rel="stylesheet" href="/public/css/icon/iconfont.css">

    <!-- import Vue before Element -->
    <script src="/public/js/vue.js"></script>
    <!-- 引入 http-vue-loader -->
    <script src="/public/js/http-vue-loader"></script>
    <title>邮件管理</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .img-demo{
            max-width: 100%;
            max-height: 100%;
        }

        .rili-time {
            font-size: 24px;
            color: red;
            display: block;
            width: 100%;
            text-align: center;
            margin-top: 5px;
        }

        .el-carousel__container {
            height: 340px;
        }

        .el-aside .el-carousel {
            margin: 5px;
            border: 2px solid #ccc;
            border-radius: 9px;
        }

        .rili {
            margin: 5px;
            border: 2px solid #ccc;
            border-radius: 9px;
            margin-top: 0px;
            border-top: none;
            padding: 10px 0 0 0;
        }

        .rili-block {
            border: 1px solid #ccc;
            /*padding: 20px;*/
        }

        .rili-date {
            display: block;
            width: 100%;
            font-size: 18px;
            border-bottom: 1px solid #ccc;
            text-align: center;
            padding: 10px 0;
        }

        .rili-day {
            font-size: 35px;
            color: blue;
            display: block;
            width: 100%;
            text-align: center;
            margin-top: 5px;
        }

        .rili-xingqi, .rili-nongli {
            display: block;
            width: 100%;
            text-align: center;
        }

        .rili-xingqi {
            font-size: 12px;
            line-height: 20px;
        }

        .rili-nongli {
            font-size: 12px;
            color: red;
            line-height: 20px;
        }

        .rili-buttom {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
            align-content: center;
        }

        .rili-buttom .item {
            flex-grow: 0;
            margin-top: 10px;
        }

        .rili .el-badge__content.is-fixed {
            right: 0px;
        }

        .content-main {
            background-color: #f5f5f5;
            border: 1px solid #99bce8;
            margin-top: 5px;
        }

        .msg-content {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
        }

        .msg-content .block {
            width: 30%;
            height: 125px;
            border-radius: 8px;
            margin: 10px;
            background-color: #fff;

        }

        .msg-content .panel-inner {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;
        }

        .msg-content .panel-inner .avatar .el-avatar {
            background-color: #fff;
            color: #47a87f;
            border: 1px solid #47a87f;
            font-size: 36px;
        }

        .msg-content .panel-inner .avatar {
            margin-top: 20px;
            margin-left: 40px;
        }

        .msg-content .panel-inner .title, .msg-content .panel-inner .msg-counts {
            display: flex;
            flex-direction: column;
            margin: 20px;
        }

        .msg-content .panel-inner .title .msg-title {
            font-size: 20px;
        }

        .msg-content .panel-inner .title .msg-total {
            font-size: 12px;
            margin-top: 20px;
        }

        .msg-content .panel-inner .msg-counts .item {
            font-size: 12px;
            margin-bottom: 15px;
        }

        .msg-content .panel-inner .msg-counts .item span:last-child {
            font-size: 16px;
            color: red;
        }

        .demo-basic--circle, .button-list {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .button-list {
            margin: 5px;
            margin-bottom: 0px;
            border-bottom-left-radius: 0px;
            border-bottom-right-radius: 0px;
            /*border: 2px solid #ccc;*/
            /*border-radius: 9px;*/
        }

        .button-list .block {
            flex: 1;
            display: flex;
            flex-direction: column;
            /*flex-grow: 1;*/
            margin-top: 10px;
        }

        .button-list .block .el-button {
            padding: 12px 5px !important;
        }


        .demo-basic--circle .block {
            flex: 1;
            display: flex;
            flex-direction: column;
            /*flex-grow: 1;*/
            margin-top: 15px;
            cursor: pointer;
            color: #8492a6;
        }

        .demo-basic--circle .block:hover {
            background-color: #e95352;
            color: #fff;
            border-radius: 8px;
        }

        .demo-basic--circle .block .title {
            margin-top: 10px;
            font-size: 14px;

            text-align: center;
        }

        .demo-basic--circle .el-avatar {
            display: inline-block;
            box-sizing: border-box;
            text-align: center;
            overflow: hidden;
            color: #fff;
            background: #f5f5f5;
            width: 40px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
        }

        .el-carousel__item h3 {
            color: #475669;
            font-size: 18px;
            opacity: 0.75;
            line-height: 300px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #f5f5f5;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #f5f5f5;
        }

        .el-header {
            height: 40px !important;
            background-color: #b81f1f;
            color: #fff;
        }

        .el-footer {
            background-color: #000;
            color: #A4A4A4;
            /*text-align: center;*/
            /*line-height: 60px;*/
        }

        .el-aside {
            background-color: #fff;
            color: #333;
            /*text-align: center;*/
            /*line-height: 200px;*/
        }

        .el-main {
            /*background-color: #E9EEF3;*/
            /*color: #333;*/
            padding: 0px;
            padding-top: 5px;
            /*text-align: center;*/
            /*line-height: 160px;*/
        }

        body > .el-container {
            margin-bottom: 40px;
        }




        .el-row {
            margin-bottom: 20px;
        }

        .el-row:last-child {
            margin-bottom: 0;
        }

        .el-col {
            border-radius: 4px;
        }

        .bg-purple-dark {
            background: #d8d8d8;
        }

        .bg-purple {
            background: #d3dce6;
        }

        .bg-purple-light {
            background: #e5e9f2;
        }

        .grid-content {
            border-radius: 4px;
            min-height: 36px;
            /*margin-top: 5px;*/
        }

        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }

        .block .el-avatar > img {
            height: auto !important;
            margin: 22px auto;
            width: 36px;
        }
    </style>
</head>
<body>


<div id="app">
    <el-container>
        <el-header>
            <el-row :gutter="20">
                <el-col :span="3">
                    <div class="grid-content">
                        <a href="/" target="_self">
                            <el-image
                                    style="width: 200px; height: 38px"
                                    src="./statics/images/logo.png"
                                    fit="contain"></el-image>
                        </a>
                    </div>
                </el-col>
                <el-col :span="14">
                    <div class="grid-content " style="line-height: 40px;">

                        <el-row>
                            <el-col :span="2">
                                <div class="grid-content" style="text-align: center">
                                    <el-image style="width: 40px; height: 40px"
                                              src="./statics/images/head.png"></el-image>
                                </div>
                            </el-col>
                            <el-col :span="4">
                                <div class="grid-content">
                                    <span>上午好！吴先生</span>
                                    <i class="el-icon-check"></i>
                                </div>
                            </el-col>
                            <!--                            <el-col :span="18">-->
                            <!--                                <el-input placeholder="请输入内容" v-model="input3" class="input-with-select" suffix-icon="el-icon-camera">-->
                            <!--                                    <el-select v-model="select" slot="prepend" placeholder="请选择">-->
                            <!--                                        <el-option label="款式" value="1"></el-option>-->
                            <!--                                        <el-option label="订单号" value="2"></el-option>-->
                            <!--                                        <el-option label="用户电话" value="3"></el-option>-->
                            <!--                                    </el-select>-->
                            <!--                                    <el-button slot="append" icon="el-icon-search"></el-button>-->
                            <!--                                </el-input>-->
                            <!--                            </el-col>-->
                        </el-row>


                    </div>
                </el-col>
                <el-col :span="7">
                    <div class="grid-content" style="height: 40px;line-height: 40px;text-align: right">
                        <quanxian-text></quanxian-text>
                        <i class="el-icon-refresh-right" style="font-size: 20px"></i>
                        <i class="el-icon-full-screen" style="font-size: 20px;margin-left: 10px;"></i>
                        <i class="el-icon-close" style="font-size: 20px;margin-left: 10px;"></i>
                    </div>
                </el-col>
            </el-row>
        </el-header>
        <el-container>
            <el-aside width="220px">

                <menus></menus>

                <div class="button-list">
                    <div class="block">
                        <el-button @click="open">网络查询</el-button>
                    </div>
                    <div class="block">
                        <el-button>企业微信</el-button>
                    </div>
                    <div class="block">
                        <el-button @click="open2" class="el-icon-search">搜索</el-button>
                    </div>
                </div>

                <div class="rili">
                    <img style="width: 100%" src="./statics/images/rili.png" alt="">
                    <div class="rili-buttom">
                        <el-button class="item" size="mini">审批</el-button>
                        <el-button class="item" size="mini">公告</el-button>
                        <el-button class="item" size="mini">
                            <el-badge :value="0" :max="99">
                                邮件
                            </el-badge>
                        </el-button>

                    </div>
                    <div class="rili-buttom" style="padding-bottom: 20px">
                        <el-button class="item" size="mini">日程</el-button>
                        <el-button class="item" size="mini">秘书</el-button>
                        <el-button class="item" size="mini">电话</el-button>

                    </div>
                </div>

                <!--                <div class="rili">-->
                <!--                    <div class="rili-block">-->
                <!--                        <span class="rili-date">2020-06-28</span>-->
                <!--                        <div>-->
                <!--                            <span class="rili-time">23:00</span>-->
                <!--                            <span class="rili-day">28</span>-->
                <!--                            <span class="rili-xingqi">星期日</span>-->
                <!--                            <span class="rili-nongli">农历五月初八</span>-->
                <!--                        </div>-->
                <!--                        <div class="rili-buttom">-->
                <!--                            <el-button class="item" size="mini">审批</el-button>
                                        <el-button class="item" size="mini">公告</el-button>-->
                <!--                            <el-button class="item" size="mini">-->
                <!--                                <el-badge :value="0" :max="99">-->
                <!--                                    邮件-->
                <!--                                </el-badge>-->
                <!--                            </el-button>-->

                <!--                        </div>-->
                <!--                        <div class="rili-buttom" style="padding-bottom: 20px">-->
                <!--                             <el-button class="item" size="mini">日程</el-button>
                                        <el-button class="item" size="mini">秘书</el-button>-->
                <!--                            <el-button class="item" size="mini">电话</el-button>-->

                <!--                        </div>-->
                <!--                    </div>-->
                <!--                </div>-->

            </el-aside>
            <el-container :style="{height: mainHeight}">
                <el-main :style="{height: mainHeight}">
                    <div class="content-main">
                        <el-tabs type="border-card">
                            <el-tab-pane label="全部邮箱">
                                <!-- <email-list></email-list> -->
                                <!-- <a href="/public/images/file/scj-add.jpg"  target="_blank">增加收藏</a> -->
                                <img class="img-demo" src="/public/images/email/add.jpg"/>
                            </el-tab-pane>
                            <el-tab-pane label="QQ邮箱">
                                <email-list></email-list>
                            </el-tab-pane>
                            <el-tab-pane label="163邮箱">
                                <email-list></email-list>
                            </el-tab-pane>
                            <el-tab-pane label="126邮箱">
                                <email-list></email-list>
                            </el-tab-pane>
                            <el-tab-pane label="139邮箱">
                                <email-list></email-list>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </el-main>

            </el-container>
        </el-container>
        <el-footer style="height: 18px;">
            <el-row>
                <el-col :span="24">
                    <div class="grid-content" style="text-align: center;font-size: 12px;min-height: 18px;">
                        Copyright ©2013 柏毓MOM系统 All rights reserved
                    </div>
                </el-col>
            </el-row>
        </el-footer>
    </el-container>

</div>


</body>


<!-- import JavaScript -->
<script src="/public/js/index.js"></script>
<script>
  Vue.use(httpVueLoader)

  new Vue({
    el: '#app',
    data: function () {
      return {
        visible: false,
        value: new Date(),
        mainHeight: '790px',
        input1: '',
        input2: '',
        input3: '',
        select: ''
      }
    },
    components: {
      // 将组建加入组建库
      'email-list': 'url:./component/email-list.vue',
      'menus': 'url:./component/menus.vue',
      'quanxian-text': 'url:./component/quanxian-text.vue',
    },
    methods: {
      open () {
        this.$prompt('请输入搜索内容', '百度搜索', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          // inputErrorMessage: '邮箱格式不正确'
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '搜索内容是: ' + value
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
      },
      open2 () {
        this.$prompt('请输入搜索内容', '全局搜索', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          // inputErrorMessage: '邮箱格式不正确'
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '搜索内容是: ' + value
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
      },
      goto (link) {
        console.log(link)
        window.location.href = './' + link + '.html'
      }
    },
    created () {
      var height = document.documentElement.clientHeight
      var newHeight = height - 40 - 20
      this.mainHeight = newHeight + 'px'
      return 1
    }
  })
</script>
</html>
